<template>
  <div class="oncampus-personnel">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>校内人员</span>
      </div>
      <QuerySearch ref="querySearch" :formConfigurationItem="searchTable">
        <!-- 按钮插槽 -->
        <template v-slot:btn="slotProps">
          <div class="btn-box">
            <el-button @click="czData({})">重置</el-button>
            <el-button type="primary" @click="searchBtn(slotProps.data)">搜索</el-button>
          </div>
        </template>
      </QuerySearch>

      <div class="student-table">
        <QueryTable
          :tableConfiguration="tableConfiguration"
          :displayContent="displayContent"
          :formData="formData"
          ref="queryTable"
          :api="getTableServe"
        >
          <template v-slot:type="{ scope }">
            {{
              scope.row.type == 1
                ? '员工'
                : scope.row.type == 2
                ? '访客'
                : scope.row.type == 3
                ? '陌生人'
                : scope.row.type == 4
                ? '非活体'
                : scope.row.type == 5
                ? '黑名单'
                : '未知类型'
            }}
          </template>
          <template v-slot:btn="{ scope }">
            <el-button type="primary" size="small" @click="qxdata(scope.row)">权限管理</el-button>
            <el-button type="info" size="small" @click="opendetails(scope.row)">下发详情</el-button>
            <el-button type="primary" size="small" plain @click="txjlData(scope.row)">通行记录</el-button>
            <el-button type="primary" size="small" @click="txglData(scope.row)">头像管理</el-button>
          </template>
        </QueryTable>
      </div>
    </el-card>

    <QxGl ref="qxGl" />
    <IssueDetails ref="issueDetails" />
    <PassageRecord ref="passageRecord" />
    <UpLoad ref="upLoad" @search="searchBtn" />
  </div>
</template>

<script>
import QueryTable from '@/components/queryTable/index.vue';
import QuerySearch from '@/components/querySearch/index.vue';

import QxGl from '@/views/StudentList/qxGl.vue';
import IssueDetails from './IssueDetails.vue';
import PassageRecord from '@/views/StudentList/passageRecord.vue';
import UpLoad from '@/components/upLoad/index.vue';

import { syspersonlist } from '@/api/comment/UserList.js';
import { sysdevicesselect } from '@/api/comment/permission.js';

export default {
  components: {
    QueryTable,
    QuerySearch,
    QxGl,
    IssueDetails,
    PassageRecord,
    UpLoad
  },
  data() {
    return {
      getTableServe: syspersonlist,
      //配置文件
      displayContent: {
        height: '57vh',
        indexFixed: true,
        selectionFixed: true,
        selection: false,
        index: true,
        paginationShow: true
      },
      formData: {}, //传给后端的参数
      tableConfiguration: [
        {
          prop: 'name',
          label: '姓名',
          width: '260',
          align: 'center'
        },

        // {
        //   prop: 'a2',
        //   label: '人脸照片',
        //   width: '260',
        //   align: 'center'
        // },
        {
          prop: 'no',
          label: '学/工号',
          width: '260',
          align: 'center'
        },
        {
          prop: 'type',
          label: '人员类型',
          width: '120',
          align: 'center',
          sockets: true
        },
        {
          prop: 'mobile',
          label: '联系方式',
          width: '260',
          align: 'center'
        },
        {
          prop: 'merge_name',
          label: '部门',
          width: '260',
          align: 'center'
        },
        {
          label: '操作',
          prop: 'btn',
          width: '390px',
          align: 'center',
          fixed: 'right',
          sockets: true
        }
      ],
      //搜索列表配置
      searchTable: [
        {
          span: 4,
          type: 'input',
          placeholder: '姓名',
          value: 'name'
        },
        {
          span: 4,
          type: 'input',
          placeholder: '学/工号',
          value: 'no'
        },
        {
          span: 4,
          type: 'input',
          placeholder: '联系方式',
          value: 'mobile'
        },
        {
          span: 4,
          type: 'input',
          placeholder: '校区/学院/专业/班级',
          value: 'searchKey'
        },
        {
          span: 4,
          type: 'select',
          placeholder: '区域',
          multiple: true,
          optionsConfig: {
            label: 'name'
          },
          value: 'GIDS',
          options: []
        },
        // {
        //   span: 4,
        //   type: 'cascader',
        //   placeholder: '组织架构',
        //   value: 'lxfs',
        //   options: [
        //     {
        //       value: 'zhinan',
        //       label: '指南',
        //       children: [
        //         {
        //           value: 'shejiyuanze',
        //           label: '设计原则',
        //           children: [
        //             {
        //               value: 'yizhi',
        //               label: '一致'
        //             },
        //             {
        //               value: 'fankui',
        //               label: '反馈'
        //             },
        //             {
        //               value: 'xiaolv',
        //               label: '效率'
        //             },
        //             {
        //               value: 'kekong',
        //               label: '可控'
        //             }
        //           ]
        //         },
        //         {
        //           value: 'daohang',
        //           label: '导航',
        //           children: [
        //             {
        //               value: 'cexiangdaohang',
        //               label: '侧向导航'
        //             },
        //             {
        //               value: 'dingbudaohang',
        //               label: '顶部导航'
        //             }
        //           ]
        //         }
        //       ]
        //     }
        //   ]
        // },
        {
          span: 4,
          type: 'btn'
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getsysdevicesselect(); //获取区域接口
  },
  methods: {
    //搜索按钮
    searchBtn(val) {
      this.formData = { ...this.formData, ...val };
      this.$nextTick(() => {
        //处理GIDS
        if (this.formData.GIDS && this.formData.GIDS.length == 0) {
          delete this.formData.GIDS;
        }
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },

    //重置
    czData(val) {
      this.formData = {};

      this.$nextTick(() => {
        this.$refs.querySearch.clearData();
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },
    qxdata(val) {
      this.$refs.qxGl.qxdata(val);
    },

    //下发详情
    opendetails(val) {
      this.$refs.issueDetails.open(val);
    },
    //通行记录
    txjlData(val) {
      this.$refs.passageRecord.open(val);
    },
    //头像管理
    txglData(val) {
      this.$refs.upLoad.open(val);
    },
    //获取校区
    async getsysdevicesselect() {
      let res = await sysdevicesselect();
      if (res.code == 0) {
        this.searchTable.forEach((item) => {
          if (item.placeholder == '区域') {
            item.options = res.data;
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.oncampus-personnel {
  width: 100%;

  box-sizing: border-box;
  padding: 10px;

  .student-table {
    margin-top: 15px;
  }

  .btn-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
